<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-form
      :model="formData"
      :rules="formRules"
      ref="formDataRef"
      label-width="100px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="id">
        <el-input v-model="formData.id"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="金额" prop="money">
        <el-input v-model="formData.money" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm()">重置</el-button>
      <el-button type="primary" v-if="dialogTitle=='新增投保人'"  @click="submitForm()">添加</el-button>
      <el-button type="primary" v-else  @click="editForm()">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      formData: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formRules: {
        name: [{ required: true, message: "姓名不能为空" }],
        id: [{ required: true, message: "身份证号码不能为空" }],
        age: [
          { required: true, message: "年龄不能为空" },
          { type: "number", message: "年龄必须为数字值" },
        ],
        money: [{ required: true, message: "金额不能为空" }],
      },
    };
  },
  methods: {
    editPerson(row) {
      this.dialogVisible = true;
      this.dialogTitle = "修改信息";
      this.formData = { ...row };
    },
    addPerson(money) {
      this.dialogVisible = true;
      this.dialogTitle = "新增投保人";
      this.formData.money = money;
    },
    resetForm() {
      this.$refs.formDataRef.resetFields();
    },
    editForm() {
      this.$refs.formDataRef.validate((valid) => {
        if (valid) {
          this.$emit("confirmEditPerson", { ...this.formData });
          this.resetForm();
          this.dialogVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },
    submitForm() {
      this.$refs.formDataRef.validate((valid) => {
        if (valid) {
          this.$emit("confirmAddPerson", { ...this.formData });
          this.resetForm();
          this.dialogVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
        }
      });
    },
    handleClose(done) {
      this.resetForm();
      this.formData = { ...this.$options.data().formData };
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin: 0 auto !important;
  width: 30%;
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
